<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统 - 通知中心</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('dashboard') }}">
                <i class="fa fa-tasks mr-2"></i>任务管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('task_list') }}">
                            <i class="fa fa-list mr-1"></i>任务列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('category_list') }}">
                            <i class="fa fa-folder mr-1"></i>分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports') }}">
                            <i class="fa fa-bar-chart mr-1"></i>数据报表
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell mr-1 text-warning"></i>{{ session.username }}
                            {% if unread_count > 0 %}
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                    {{ unread_count }}
                                    <span class="visually-hidden">未读通知</span>
                                </span>
                            {% endif %}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item active" href="{{ url_for('notifications') }}">
                                    <i class="fa fa-bell mr-1"></i>通知
                                    {% if unread_count > 0 %}
                                        <span class="badge bg-danger ml-2">{{ unread_count }}</span>
                                    {% endif %}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('settings') }}">
                                    <i class="fa fa-cog mr-1"></i>设置
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('logout') }}">
                                    <i class="fa fa-sign-out mr-1"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-4">
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 页面标题和操作按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fa fa-bell mr-2"></i>通知中心
                {% if unread_count > 0 %}
                    <span class="badge bg-danger ml-2">{{ unread_count }}</span>
                {% endif %}
            </h2>
            <div class="btn-group">
                {% if unread_count > 0 %}
                    <a href="{{ url_for('mark_all_as_read') }}" class="btn btn-secondary">
                        <i class="fa fa-check-circle mr-1"></i>全部标记为已读
                    </a>
                {% endif %}
                <button type="button" class="btn btn-danger" id="deleteAllBtn">
                    <i class="fa fa-trash mr-1"></i>清空通知
                </button>
            </div>
        </div>

        <!-- 通知过滤标签 -->
        <div class="mb-4">
            <div class="btn-group" role="group" aria-label="通知过滤">
                <a href="{{ url_for('notifications', filter='all') }}" class="btn {% if filter == 'all' %}btn-primary{% else %}btn-secondary{% endif %}">
                    全部通知
                </a>
                <a href="{{ url_for('notifications', filter='unread') }}" class="btn {% if filter == 'unread' %}btn-primary{% else %}btn-secondary{% endif %}">
                    未读通知
                    {% if unread_count > 0 %}
                        <span class="badge bg-danger ml-1">{{ unread_count }}</span>
                    {% endif %}
                </a>
                <a href="{{ url_for('notifications', filter='system') }}" class="btn {% if filter == 'system' %}btn-primary{% else %}btn-secondary{% endif %}">
                    系统通知
                </a>
                <a href="{{ url_for('notifications', filter='task') }}" class="btn {% if filter == 'task' %}btn-primary{% else %}btn-secondary{% endif %}">
                    任务通知
                </a>
            </div>
        </div>

        <!-- 通知列表 -->
        <div class="card bg-white shadow-sm">
            <div class="card-body">
                {% if notifications %}
                    <div class="list-group">
                        {% for notification in notifications %}
                            <div class="list-group-item {% if not notification.is_read %}bg-light border-left-4 border-primary{% endif %}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div class="d-flex gap-3">
                                        <!-- 通知图标 -->
                                        <div class="flex-shrink-0">
                                            {% if notification.type == 'system' %}
                                                <i class="fa fa-cog text-primary fa-lg"></i>
                                            {% elif notification.type == 'task' %}
                                                <i class="fa fa-tasks text-secondary fa-lg"></i>
                                            {% elif notification.type == 'deadline' %}
                                                <i class="fa fa-clock-o text-warning fa-lg"></i>
                                            {% elif notification.type == 'comment' %}
                                                <i class="fa fa-comment text-info fa-lg"></i>
                                            {% endif %}
                                        </div>
                                        <!-- 通知内容 -->
                                        <div class="flex-grow-1">
                                            <p class="mb-1">
                                                {{ notification.content }}
                                            </p>
                                            <p class="text-sm text-muted">
                                                {{ notification.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
                                            </p>
                                        </div>
                                    </div>
                                    <!-- 操作按钮 -->
                                    <div class="flex-shrink-0">
                                        {% if not notification.is_read %}
                                            <a href="{{ url_for('mark_as_read', notification_id=notification.id) }}" class="btn btn-sm btn-secondary" title="标记为已读">
                                                <i class="fa fa-check"></i>
                                            </a>
                                        {% endif %}
                                        <button class="btn btn-sm btn-danger delete-notification-btn" data-id="{{ notification.id }}" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-8">
                        <i class="fa fa-bell-slash text-muted fa-4x mb-4"></i>
                        <h4 class="text-muted">暂无通知</h4>
                        <p class="text-sm text-gray-500">
                            {% if filter == 'unread' %}
                                您没有未读通知
                            {% else %}
                                当有新的任务更新或系统通知时，将会显示在这里
                            {% endif %}
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 分页控制 -->
        {% if notifications and notifications.pages > 1 %}
            <div class="mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <li class="page-item {% if not notifications.has_prev %}disabled{% endif %}">
                            <a class="page-link" href="{{ url_for('notifications', page=notifications.prev_num, filter=filter) }}" aria-label="上一页">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% for page_num in notifications.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
                            {% if page_num %}
                                <li class="page-item {% if page_num == notifications.page %}active{% endif %}">
                                    <a class="page-link" href="{{ url_for('notifications', page=page_num, filter=filter) }}">{{ page_num }}</a>
                                </li>
                            {% else %}
                                <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                            {% endif %}
                        {% endfor %}
                        <li class="page-item {% if not notifications.has_next %}disabled{% endif %}">
                            <a class="page-link" href="{{ url_for('notifications', page=notifications.next_num, filter=filter) }}" aria-label="下一页">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        {% endif %}
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body" id="deleteConfirmMessage">
                    您确定要删除这条通知吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 删除确认模态框
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
            let currentNotificationId = null;
            
            // 单个删除按钮点击事件
            document.querySelectorAll('.delete-notification-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    currentNotificationId = this.getAttribute('data-id');
                    document.getElementById('deleteConfirmMessage').textContent = '您确定要删除这条通知吗？此操作不可恢复。';
                    deleteModal.show();
                });
            });
            
            // 清空通知按钮点击事件
            document.getElementById('deleteAllBtn').addEventListener('click', function() {
                currentNotificationId = 'all';
                document.getElementById('deleteConfirmMessage').textContent = '您确定要清空所有通知吗？此操作不可恢复。';
                deleteModal.show();
            });
            
            // 确认删除按钮点击事件
            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                if (currentNotificationId === 'all') {
                    // 清空所有通知
                    window.location.href = '{{ url_for('delete_all_notifications') }}';
                } else {
                    // 删除单个通知
                    window.location.href = '{{ url_for('delete_notification', notification_id='') }}' + currentNotificationId;
                }
            });
        });
    </script>
</body>
</html>